<template>
	<view class="courseDetail-content">
		<view class="detail-body">
			<view class="detail-content" style="display:flex;flex-direction:column;">
				<view class="detail-image" style="flex:none;">
					<image :src="courseData.full_cover" mode="widthFix"></image>
				</view>
				<view style="position: sticky;top:0rpx;">
					<view class="detail-text" style="flex:none;">
						<view class="detail-name">{{courseData.title}}</view>
						<view class="detail-price">{{courseData.price}}</view>
						<view class="detail-tips">{{courseData.label}}</view>
					</view>
					<view class="course-text" style="flex:none;">
						<view class="text-item">
							<view>{{courseData.is_valid_forever == 1?'终生享用':courseData.time_expire_day}}</view>
							<view>有效期</view>
						</view>
						<view class="text-item">
							<view>{{courseData.class}}课时</view>
							<view>课时数</view>
						</view>
						<view class="text-item">
							<view>{{courseData.purchase_volume}}人</view>
							<view>购买量</view>
						</view>
					</view>
					<view style="flex:none;">
						<u-tabs :list="list" active-color='#2AC092' :is-scroll="false" :current="current"
							@change="change"></u-tabs>
					</view>
				</view>
				<view class="course-list" style="flex:none;overflow: hidden;">
					<view v-if="current == 0">
						<view class="directory-item" v-for="(item,index) in dataList" :key="index" @click="butclick(item)">
							<view class="directory-title">
								<view class="period" style="flex:none;">第{{item.sort}}课时</view>
								<view class="directory-name">{{item.title}}</view>
							</view>
							<!-- <view class="fun-box" v-if="item.status == 0">{{item.text}}</view> -->
							<view class="islock" v-if="courseData.is_pay==0">
								<image src="/static/index/lock.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					
					
					<view class="blurb" v-if="current == 1 && courseData.is_pay == 0">
						<view style="padding:10rpx 30rpx 20rpx;box-sizing: border-box;">
							<view v-html="courseData.intro" style="overflow: hidden;"></view>
						</view>
					</view>
					
					<view class="blurb" v-if="current == 1 && courseData.is_pay != 0">
						<view class="directory-item" v-for="(item,index) in practice" :key="index">
							<view class="directory-title">
								<view class="directory-name">{{item.title}}</view>
							</view>
							<view class="fun-box1">立即练习</view>
						</view>
					</view>
				</view>
				
				<!-- 定位 -->
				<view class="buy-box" v-if="courseData.is_pay == 0">
					<view class="buy-price">付款: <span>￥{{courseData.price}}</span></view>
					<u-button shape="circle" :custom-style="customStyle" @click="gotoBuy">立即购买</u-button>
				</view>
				<view class="buy-box1" v-if="courseData.id&&courseData.is_pay != 0">
					<view class="down-box">
						<image src="../../static/index/wd.png" mode=""></image>
						<view @tap="downloadFile(courseData.full_documentation)">文档下载</view>
					</view>
					<view class="down-box">
						<image src="../../static/index/dayin.png" mode=""></image>
						<view>文档打印</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 播放视频 -->
		<view class="box-video" :class="videokan?'':'box-video-on'">
			<video :src="video" class="video"></video>
			<view class="back" @click="videokan=false"></view>
		</view>
	</view>
</template>

<script>
	import {
		getExcellentdetails
	} from '../../api/course.js'
	import { createGoodOrders } from '@/api/pay.js'
	export default {
		data() {
			return {
				customStyle: {
					background: '#2AC092',
					color: '#fff'
				},
				list: [{
					name: '课程目录'
				}, {
					name: '课程简介'
				}],
				current: 0,
				// 练习
				practice: [],
				// 下载进度条
				isShowProgress:false,
				// 目录
				muid:'',
				dataList: [],
				courseData: {},
				
				//当前视频
				video:'',
				videokan:false,
			}
		},
		onLoad(e) {
			console.log("查看",e);
			this.muid=e.ids||""
		},
		onShow(){
			if(this.muid){
				console.log("加载");
				this.init(this.muid)
			}	
		},
		methods: {
			init(id) {
				let that = this
				getExcellentdetails({id}).then(res => {
					if(!res.data){
						return
					}
					that.courseData = res.data.data;
					console.log('数据',res);
					if(that.courseData.is_pay!=0){
						that.list=[{
							name: '课程目录'
						}, {
							name: '写真练习'
						}]
					}
					let arr1 = res.data.data.directories; //课程
					that.dataList = arr1;
					that.practice = res.data.data.practices;
				})
			},
			// 点击视频-文档
			butclick(v){
				if(this.courseData.is_pay == 0){
					uni.showModal({
						title: '温馨提示',
						content: '购买后可查看、下载、打印',
						success: function (res) {
							if (res.confirm) {
								this.gotoBuy()
							}
						}
					});
					return
				}
				if(v.type==1){
					if(!v.video){return}
					this.video=this.$API+'/uploads/'+v.video
					this.videokan=true
				}else{
					this.butwendan(v.pdf)
				}
			},
			//打开文档
			butwendan(urls){
				if(!urls){return}
				let url=this.$API+'/uploads/'+urls
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				uni.downloadFile({
					url: url,
					success: function (res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						uni.showLoading({
							title: '正在打开',
							mask: true,
						});
						uni.openDocument({
							filePath: filePath,
							success: function (res) {
								uni.hideLoading();
							},
							fail: function (err) {
								uni.hideLoading();
							},
						});
					},
					fail: function (err) {
						uni.hideLoading();
					},
				});
			},
			change(index) {
				this.current = index;
			},
			gotoBuy() {
				let that = this;
				createGoodOrders({excellent_course_id:this.courseData.id}).then(res=>{
					uni.navigateTo({
						url: '/pagesA/confirmOrder/index?productInfo='+ encodeURIComponent(JSON.stringify(that.courseData)) + '&order_no='+res.data.data.order_no
					})
				}).catch()
			},
			// 文件下载
			downloadFile(url) {
				const downloadTask = uni.downloadFile({
					url,
					success: res => {
						if (res.statusCode === 200) {
							this.isShowProgress = false;
							console.log('下载成功');
						}
						let that = this;
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function(red) {
								that.isShowProgress = false;
								uni.showModal({
									title: '提示',
									content: '文件已保存：' + red.savedFilePath,
									cancelText: '我知道了',
									confirmText: '打开文件',
									success: function(res) {
										if (res.confirm) {
											uni.openDocument({
												filePath: red.savedFilePath,
												success: (sus) => {
													console.log('成功打开');
												}
											})
										}
									}
								});
							}
						});
					}
				})

				downloadTask.onProgressUpdate((res) => {
					if (res.progress > 0) {
						this.isShowProgress = true;
					}
					this.progress = res.progress;
					console.log('下载进度：' + res.progress);
					console.log('已下载长度：' + res.totalBytesWritten);
					console.log('文件总长度：' + res.totalBytesExpectedToWrite);
				})
			},
		}
	}
</script>

<style lang="scss">
	.detail-body{
		padding-bottom:140rpx;
	}
	.box-video{
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		right:0;
		width:100vw;
		height:100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index:1000;
		display:flex;
		align-items:center;
		justify-content: center;
		transition:0.3s;
		.back{
			position:absolute;
			top:0;
			left:0;
			bottom:0;
			right:0;
			width:100%;
			height:100%;
			background-color:transparent;
		}
		.video{
			width:100%;
			flex:none;
			position:relative;
			z-index:2;
		}
	}
	.box-video-on{
		visibility:hidden;
		opacity:0;
	}
	.detail-image {
		width: 100vw;
		>image {
			width: 100%;
			height: 100%;
		}
	}

	.detail-text {
		padding: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
		background-color: #fff;

		.detail-name {
			font-size: 34rpx;
		}

		.detail-price {
			font-size: 36rpx;
			color: #FF4D4D;
			margin: 20rpx 0;
		}

		.detail-tips {
			font-size: 24rpx;
			color: #2AC092;
			padding: 10rpx;
			background-color: #DEFCF3;
			border-radius: 10rpx;
			width: max-content;
			border: 1rpx solid #2AC092;
		}
	}

	.course-text {
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		justify-content: space-between;


		.text-item {
			text-align: center;

			>view:first-child {
				font-size: 26rpx;
				margin-bottom: 10rpx;
			}

			>view:nth-child(2) {
				font-size: 22rpx;
				color: #999999;
			}
		}

	}

	.course-list {
		.directory {
			height:100%;
			background-color: #fff;
		}

		.directory-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;

			.directory-title {
				display: flex;
				align-items: center;

				.period {
					color: #2AC092;
					border: 1rpx solid #2AC092;
					background-color: #DEFCF3;
					padding: 10rpx 15rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
				}

				.directory-name {
					margin-left: 20rpx;
					font-size: 30rpx;
				}
			}

			.fun-box {
				color: #fff;
				background-color: #FFA23B;
				border-radius: 25rpx;
				padding: 10rpx 15rpx;
			}

			.fun-box1 {
				color: #fff;
				background-color: #2AC092;
				border-radius: 25rpx;
				padding: 10rpx 15rpx;
			}

			.islock {
				width: 40rpx;
				height: 40rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.buy-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		height:140rpx;
		.buy-price {
			font-size: 28rpx;

			>span {
				font-size: 36rpx;
				color: #FF4D4D;
			}
		}
	}

	.buy-box1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 150rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		height:140rpx;
		.down-box {
			display: flex;

			>image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>